<template>
	<view>
		<view class="canvasBox" v-show='isUse'>
			<view class="trachBox" :style="{backgroundColor: !trackStatus ?'aliceblue' : 'khaki'}" @click='handlerTrach'
				v-if='isUseTorch'>
				<img src="./track.svg" class='trach'>
			</view>
			<view class="goback" hover-class="avtive" @click="goback">
				<svg color="#fff" width="30px" height="30px" viewBox="0 0 36 36" colorType="light"
					style="min-width: 30px; min-height: 30px;">
					<path
						d="M21.945 23.847L20.788 25l-6.548-6.523a.813.813 0 010-1.154l6.548-6.523 1.157 1.153-5.969 5.947 5.97 5.947z"
						fill="currentColor" fill-rule="nonzero"></path>
				</svg>
			</view>
			<!-- skip -->
			<view class="skip" hover-class="avtive" @click="skip">
				跳过
				<svg width="8px" height="15px" viewBox="0 0 8 15" align="center" class="sc-gsFSXq hebHcC">
					<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
						<g id="Forward" transform="translate(-14.000000, -10.000000)" fill="currentColor"
							fill-rule="nonzero">
							<g id="Group" transform="translate(14.000000, 10.800000)">
								<g id="Icon-set">
									<path
										d="M1.93581585e-14,13.0468137 L1.1575296,14.2 L7.70550587,7.67659315 C8.02514884,7.35814954 8.02514884,6.84185046 7.70550587,6.52340685 L1.1575296,-9.38577383e-15 L1.93581585e-14,1.1531863 L5.96921146,7.1 L1.93581585e-14,13.0468137 Z"
										id="Forward"></path>
								</g>
							</g>
						</g>
					</g>
				</svg>
			</view>
			<!-- 小框 -->

			<view class="picbox1" hover-class="avtive" :style="picbox1">

			</view>
			<!-- 小框 -->
			<view class="picbox2" hover-class="avtive" :style="picbox2">
				<!-- <img :src="img2" alt="" v-if="img2" /> -->
			</view>
			<!-- 大框 -->
			<view class="shutterBox1" hover-class="avtive">

			</view>
			<!-- 相册 -->
			<view class="xiangce" @click="openxiangce">
				<svg color="#fff" width="30" height="30" viewBox="0 0 46 45" version="1.1"
					xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" colorType="light"
					source="https://www.certilogo.biz/static/media/library.91d2633d9095f02af0ebd39bedc7bdf7.svg"
					containerStyle="[object Object]" class="sc-dUWDJJ gJRZKO">
					<title>Camera/Library/white</title>
					<defs>
						<path
							d="M36.4166667,-1.25000001e-07 C38.7920435,-1.25000001e-07 40.7221643,1.86492419 40.7605292,4.17971837 L40.7611112,4.2499999 L40.7612519,6.37593186 C42.2476751,7.03387146 43.2880205,8.48643192 43.3160848,10.1797184 L43.3166668,10.2499999 L43.3167676,12.1967671 C44.8919185,12.8349466 45.9999999,14.3533832 45.9999999,16.125 L45.9999999,16.125 L45.9999999,40.7500001 C45.9999999,43.0972102 44.054926,44.9999999 41.6555557,44.9999999 L41.6555557,44.9999999 L4.34444434,44.9999999 C1.94507391,44.9999999 -1.280288e-07,43.0972102 -1.280288e-07,40.7500001 L-1.280288e-07,40.7500001 L-1.280288e-07,16.125 C-1.280288e-07,14.340265 1.12455217,12.8124733 2.71829944,12.1827356 L2.7046693,10.2794692 C2.69251669,8.55380627 3.73337542,7.06123335 5.23895548,6.38533175 L5.23888879,4.2499999 C5.23888879,1.9262618 7.14525586,0.0381001135 9.51148992,0.000569253578 L9.58333326,-1.25000001e-07 L36.4166667,-1.25000001e-07 Z M41.6555557,14.375 L4.34444434,14.375 C3.35646828,14.375 2.55555544,15.1585017 2.55555544,16.125 L2.55555544,16.125 L2.55555544,40.7500001 C2.55555544,41.7164984 3.35646828,42.5000001 4.34444434,42.5000001 L4.34444434,42.5000001 L41.6555557,42.5000001 C42.6435317,42.5000001 43.4444446,41.7164984 43.4444446,40.7500001 L43.4444446,40.7500001 L43.4444446,16.125 C43.4444446,15.1585017 42.6435317,14.375 41.6555557,14.375 L41.6555557,14.375 Z M38.9722223,8.49999992 L7.03671195,8.500042 C6.06211035,8.50665307 5.27495039,9.27448004 5.2602701,10.2230517 L5.2602701,10.2621343 L5.2715999,11.8749999 L40.7611112,11.8749999 L40.7611112,10.2499999 C40.7611112,9.2965624 39.9816984,8.52120906 39.0121714,8.50042767 L38.9722223,8.49999992 Z M36.4166667,2.49999989 L9.58333326,2.49999989 C8.60870823,2.49999989 7.81612481,3.26246894 7.79488162,4.21091927 L7.79444436,4.2499999 L7.79444436,5.99999989 L38.2055556,5.99999989 L38.2055556,4.2499999 C38.2055556,3.29656237 37.4261429,2.52120903 36.4566158,2.50042764 L36.4166667,2.49999989 Z"
							id="path-1"></path>
					</defs>
					<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
						<g id="Camera/Action-bar" transform="translate(-47.000000, -29.000000)">
							<g id="Camera/Library/white" transform="translate(47.000000, 29.000000)">
								<mask id="mask-2" fill="white">
									<use xlink:href="#path-1"></use>
								</mask>
								<g id="Library" fill-rule="nonzero"></g>
								<g id="Group" mask="url(#mask-2)" fill="currentColor">
									<g id="🎨-color">
										<rect id="Rectangle" x="0" y="0" width="46" height="45.1253482"></rect>
									</g>
								</g>
							</g>
						</g>
					</g>
				</svg>
			</view>
			<!-- 问号 -->
			<view class="tips" @click='showtips' hover-class="avtive">
				<svg color="#fff" width="30" height="30" viewBox="0 0 45 45" version="1.1"
					xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" colorType="light"
					source="https://www.certilogo.biz/static/media/help.192848065f3b876b848a397bfde8cf62.svg"
					containerStyle="[object Object]" class="sc-aNeao eRtykM">
					<title>Icone/info/white</title>
					<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
						<g id="Camera/Action-bar" transform="translate(-283.000000, -29.000000)" fill="currentColor"
							fill-rule="nonzero">
							<g id="Icone/info/white" transform="translate(283.000000, 29.000000)">
								<path
									d="M22.5,0 C34.9264071,0 45,10.0735932 45,22.5 C45,34.9264071 34.9264071,45 22.5,45 C10.0735932,45 0,34.9264071 0,22.5 C0,10.0735932 10.0735932,0 22.5,0 Z M22.5,2.50000001 C11.4543051,2.50000001 2.50000001,11.4543051 2.50000001,22.5 C2.50000001,33.5456952 11.4543051,42.5 22.5,42.5 C33.5456952,42.5 42.5,33.5456952 42.5,22.5 C42.5,11.4543051 33.5456952,2.50000001 22.5,2.50000001 Z"
									id="Combined-Shape"></path>
								<path
									d="M22.5635871,26.2428263 C23.4114131,26.2428263 24.1066305,26.4886958 24.6492393,26.9804349 C25.191848,27.472174 25.4631523,28.0995654 25.4631523,28.8626089 C25.4631523,29.6086958 25.191848,30.2403263 24.6492393,30.7575002 C24.1066305,31.274674 23.4114131,31.5332611 22.5635871,31.5332611 C21.7327175,31.5332611 21.0459784,31.274674 20.5033697,30.7575002 C19.960761,30.2403263 19.6894566,29.6086958 19.6894566,28.8626089 C19.6894566,28.0995654 19.9565219,27.472174 20.4906522,26.9804349 C21.0247827,26.4886958 21.715761,26.2428263 22.5635871,26.2428263 Z"
									id="Help-path"></path>
								<path
									d="M22.2838045,13.1439131 C24.3016305,13.1439131 25.9252175,13.5635871 27.1545654,14.4029348 C28.3839132,15.2422827 28.9985872,16.4165218 28.9985872,17.9256522 C28.9985872,18.6208697 28.8798914,19.2355436 28.6425002,19.769674 C28.4051089,20.3038045 28.1210872,20.7531522 27.7904349,21.1177175 C27.4597828,21.4822827 27.0316305,21.8934784 26.5059784,22.3513045 C25.9294566,22.8430436 25.5055436,23.2627175 25.2342393,23.6103263 C24.9629349,23.9579349 24.8272828,24.3606523 24.8272828,24.8184784 L24.8272828,24.8184784 L20.2998914,24.8184784 L20.3004052,24.741812 C20.311367,23.9283973 20.4977175,23.2544961 20.8594566,22.7201089 C21.2325001,22.1690219 21.7751089,21.5628262 22.4872828,20.9015219 C22.9790219,20.4436957 23.3435871,20.0579349 23.5809784,19.7442392 C23.8183698,19.4305436 23.9370654,19.0956522 23.9370654,18.7395654 C23.9370654,18.2478262 23.729348,17.8535871 23.3139131,17.556848 C22.8984784,17.2601088 22.3601089,17.1117392 21.6988045,17.1117392 C21.0205436,17.1117392 20.4058697,17.2728262 19.8547827,17.5950001 C19.3036957,17.917174 18.8585871,18.3665219 18.5194566,18.9430436 L18.5194566,18.9430436 L14.729674,16.908261 L14.7744411,16.8328547 C15.466872,15.6820987 16.435428,14.7831037 17.6801088,14.1358697 C18.951848,13.4745653 20.4864131,13.1439131 22.2838045,13.1439131 Z"
									id="Help-path"></path>
							</g>
						</g>
					</g>
				</svg>







			</view>
			<!-- 文字 -->
			<view class="camerafont">
				在框内呈现完整的标签或 TAG，里头有 CLG 代码。
			</view>
			<view class="shutterBox" @click='hanlderShutter' hover-class="avtive">
				<view class="shutter"></view>
			</view>
		</view>
		<view class="error" v-show='!isUse'>
			<view class="on1">相机权限被拒绝，请尝试如下操作：</view>
			<view>· 刷新页面后重试；</view>
			<view>· 在系统中检测当前App或浏览器的相机权限是否被禁用；</view>
			<view>· 如果依然不能体验，建议在微信中打开链接；</view>

		</view>
		<view :class="tips===true ?'showing' : 'unshow'" @click="tips = false">
			<view class="neirong">
				<view class="nclose">
					<view class="">

					</view>
					<view class="ncloseimg">
						<svg width="30px" height="30px" viewBox="0 0 36 36" colorType="dark" class="sc-uVWWZ bACIZH">
							<path
								d="M18 3c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C3 9.716 9.716 3 18 3zm0 1.667c-7.364 0-13.333 5.97-13.333 13.333 0 7.364 5.97 13.333 13.333 13.333 7.364 0 13.333-5.97 13.333-13.333 0-7.364-5.97-13.333-13.333-13.333zm4.716 7.488l1.175 1.183-4.727 4.692 4.727 4.693-1.175 1.183-4.735-4.701-4.735 4.7-1.175-1.182 4.727-4.693-4.727-4.692 1.175-1.183 4.735 4.701 4.735-4.701z"
								fill="currentColor" fill-rule="nonzero"></path>
						</svg>
					</view>
				</view>
				<view class="ntitle">
					我应该拍摄什么？
				</view>
				<view class="ncontent">
					CLG TAG：可以是标签、贴纸、卡片、吊牌等等。上头要有 "CLG + 12 个数字"。我们有时候也会需要商品的照片。
				</view>
				<view class="ntitle">
					如何拍摄完美的照片？
				</view>
				<view class="ncontent">
					请确保标签或 TAG 有完整呈现，不要不小心遮住了。照片本身也需清晰、光线充足。
				</view>
				<view class="ntitle">
					如果现在不便拍照怎么办？
				</view>
				<view class="ncontent">
					我们有时候会需要照片才能给您结果。如果您目前无法直接提供照片，可以通过稍后提供的链接上传。有些时候我们不一定需要照片，即使不提供照片也能立刻获得查询结果。然而，提供照片可以帮助我们训练我们的人工智能引擎，让我们的服务持续进步。
				</view>
			</view>
		</view>
		<view :class="show===true?'show':'unshow'" @click="show=false">
			<view class="show_all">
				<view class="toast">
					<view class="pic">
						<img class="pic_img" src="/static/img.png" alt="" />
						<svg color="#fff" width="30px" height="30px" viewBox="0 0 45 45" class="sc-kWtpeL liUqCn">

							<g fill="none" fill-rule="evenodd">
								<g transform="rotate(20 6.02 34.143)">
									<path
										d="M32.617 7.756h2.356V1.758C34.945.756 34.233.055 33.236.055h-5.97V2.41h5.346v5.346h.005zM2.355 27.326H0V33.324c.027 1.002.74 1.698 1.73 1.698h5.971v-2.355H2.355v-5.34zM32.617 32.672h-5.345v2.355h5.97c.991 0 1.703-.7 1.73-1.703v-5.998h-2.355v5.346zM0 1.753V7.75h2.355V2.41h5.346V.055h-5.97C.739.055.027.755 0 1.753"
										fill="currentColor"></path>
								</g>
							</g>
						</svg>



					</view>
					<view class="toastfont">
						这是个必须执行的步骤，我们需要照片才能给您结果。
					</view>
				</view>
				<view class="know">
					好的，我知道了
					<img class="item_img" src="/static/right.png" alt="" style="margin-left: 10px;" />
				</view>
				<view class="continue resend" @click="toEnd">
					跳过
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			exact: {
				type: String,
				default: 'environment' // environment 后摄像头  user 前摄像头
			},
			//水印
			watermark: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				isUse: false,
				tips: false,
				windowWidth: 0,
				windowHeight: 0,
				video: null,
				canvas: null,
				canvas2d: null,
				cameraCanvas: null,
				cameraCanvas2d: null,
				show: false,
				img1: '',
				img2: '',
				picbox1: '',
				picbox2: '',

				// 闪光灯
				track: null,
				isUseTorch: false,
				trackStatus: false
			}
		},
		mounted() {
			this.img1 = uni.getStorageSync('img')
			this.img2 = uni.getStorageSync('img2')
			if (this.img1 !== '') {
				// console.log(1111111111111111);
				this.picbox1 = `background-image: url(${this.img1});`
			}
			if (this.img2 !== '') {
				// console.log(1111111111111111);
				this.picbox2 = `background-image: url(${this.img2});`
			}
			if (origin.indexOf('https') === -1) throw '请在 https 环境中使用本插件。'

			this.windowWidth = document.documentElement.clientWidth || document.body.clientWidth
			this.windowHeight = document.documentElement.clientHeight || document.body.clientHeight
			this.$nextTick(() => {
				this.video = document.createElement('video')
				this.video.width = this.windowWidth
				this.video.height = this.windowHeight

				const canvas = document.createElement('canvas')
				this.canvas = canvas
				canvas.id = 'canvas'
				canvas.width = this.windowWidth
				canvas.height = this.windowHeight
				canvas.style = 'position: fixed;top: 0;left: 0;z-index:10;'
				this.canvas2d = canvas.getContext('2d')

				// 设置当前宽高 满屏
				const canvasBox = document.querySelector('.canvasBox')
				canvasBox.append(this.video)
				canvasBox.append(canvas)
				canvasBox.style = `width:${this.windowWidth}px;height:${this.windowHeight}px;`

				const cameraCanvas = document.createElement('canvas')
				this.cameraCanvas = cameraCanvas
				cameraCanvas.id = 'cameraCanvas'
				cameraCanvas.width = this.windowWidth
				cameraCanvas.height = this.windowHeight
				cameraCanvas.style = 'display:none;'
				canvasBox.append(canvas)
				this.cameraCanvas2d = cameraCanvas.getContext('2d')

				this.openScan()
			})
		},
		methods: {
			toEnd() {
				uni.navigateTo({
					url: '/pages/mail/finish?nopic=true'
				})
			},
			skip() {
				this.show = true
			},
			goback() {
				uni.navigateTo({
					url: '/pages/mail/photo'
				})
			},
			openxiangce() {
				uni.chooseImage({
					count: 1,
					// sourceType: 'album',
					success: res => {
						console.log(res);
						// res.tempFilePaths[0]
						let img1 = uni.getStorageSync('img')
						if (!img1 || img1 === '') {
							console.log('img1');
							uni.setStorageSync('img', res.tempFilePaths[0])
						} else {
							console.log('img2');
							uni.setStorageSync('img2', res.tempFilePaths[0])
						}
						uni.navigateTo({
							url: '/pages/mail/confirm'
						})
					}
				})
			},
			showtips() {
				console.log(this.tips);
				this.tips = true
			},
			openScan() {
				let width = this.transtion(this.windowHeight)
				let height = this.transtion(this.windowWidth)

				const videoParam = {
					audio: false,
					video: {
						facingMode: {
							exact: this.exact
						},
						width,
						height
					}
				}


				navigator.mediaDevices.getUserMedia(videoParam).then((stream) => {
					this.isUse = true
					this.video.srcObject = stream
					this.video.setAttribute('playsinline', true)
					this.video.setAttribute('webkit-playsinline', true)
					this.video.play()
					this.makeWatermark(this.canvas2d)

					this.track = stream.getVideoTracks()[0];
					setTimeout(() => {
						this.isUseTorch = this.track.getCapabilities().torch || null
					}, 500)
				}).catch((err) => {
					console.log('设备不支持', err);
					this.isUse = false
				})
			},

			async makeWatermark(ctx2d) {
				if (this.watermark.length === 0) return
				for (let item of this.watermark) {
					switch (item.type) {
						case 'img':
							const [getImgErr, {
								path: imgPath
							}] = await uni.getImageInfo({
								src: item.url
							});
							if (getImgErr) throw item.url + '没有找到'
							const img = await this.getImg(imgPath)
							ctx2d.drawImage(img, item.x, item.y, item.w, item.h)

							break;
						case 'text':
							const color = item.font_color || "#000"
							const fontSize = item.font_size || 16

							ctx2d.fillStyle = color
							ctx2d.font = `${fontSize}px normal`
							ctx2d.fillText(item.text, item.x, item.y)
							break;
					}

				}
			},

			getImg(path) {
				return new Promise((resolve, reject) => {
					const img = new Image()
					img.src = path
					img.onload = (res) => {
						resolve(img)
					}
				})
			},


			transtion(number) {
				return number * 2
			},

			// 快门
			async hanlderShutter() {
				this.cameraCanvas2d.drawImage(this.video, 0, 0, this.windowWidth, this.windowHeight)
				await this.makeWatermark(this.cameraCanvas2d)
				const img = this.cameraCanvas.toDataURL('image/png')
				console.log(img);
				this.$emit('success', img)
			},

			handlerTrach() {
				console.log(12312)
				this.trackStatus = !this.trackStatus
				this.track.applyConstraints({
					advanced: [{
						torch: this.trackStatus
					}]
				})
			},

			closeCamera() {
				if (this.video.srcObject) {
					this.video.srcObject.getTracks().forEach((track) => {
						track.stop()
					})
				}
			},

		},
		destroyed() {
			this.closeCamera()
		},
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #333;
	}

	.canvasBox {
		position: relative;

		.camerafont {
			position: absolute;
			transform: translateX(-50%);
			left: 50%;
			top: 70%;
			color: #fff;
			// background-color: aliceblue;
			// background-image: url('../../../../static/fk.png');
			// border: #fff 2px solid;
			width: 260px;
			height: max-content;
			display: flex;
			align-items: center;
			justify-content: center;
			// box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
			z-index: 100;
			overflow: hidden;
		}

		.picbox1 {
			position: absolute;
			transform: translateX(-50%);
			left: 40%;
			top: 15%;
			// background-color: aliceblue;
			// background-image: url('../../../../static/fk.png');
			border: #fff 2px solid;
			width: 35px;
			height: 35px;
			display: flex;
			align-items: center;
			justify-content: center;
			// box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
			z-index: 100;
			overflow: hidden;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		.picbox2 {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			transform: translateX(-50%);
			left: 60%;
			top: 15%;
			// background-color: aliceblue;
			// background-image: url('../../../../static/fk.png');
			border: #fff 2px solid;
			width: 35px;
			height: 35px;
			display: flex;
			align-items: center;
			justify-content: center;
			// box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
			z-index: 100;
			overflow: hidden;
		}

		.tips {
			position: absolute;
			transform: scale(1.5);
			left: 80%;
			bottom: 130rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
			z-index: 100;
			overflow: hidden;
		}

		.shutterBox1 {
			position: absolute;
			transform: translateX(-50%);
			left: 50%;
			top: 25%;
			// background-color: aliceblue;
			// background-image: url('../../../../static/fk.png');
			border: #fff 2px solid;
			width: 280px;
			height: 280px;
			display: flex;
			align-items: center;
			justify-content: center;
			// box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
			z-index: 100;
			overflow: hidden;
		}

		.shutterBox {
			position: absolute;
			transform: translateX(-50%);
			left: 50%;
			bottom: 100rpx;
			background-color: aliceblue;
			width: 120rpx;
			height: 120rpx;
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
			z-index: 100;
			overflow: hidden;

			.shutter {
				width: 70rpx;
				height: 70rpx;
				border: 10rpx solid #333;
				border-radius: 100rpx;


			}

			&.avtive::after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: rgba(000, 000, 000, 0.5);
			}
		}

		.trachBox {
			position: absolute;
			transform: translateX(-50%);
			left: 30%;
			bottom: 100rpx;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100rpx;
			box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
			z-index: 30;

			.trach {
				width: 50rpx;
			}
		}

	}

	.error {
		color: #fff;
		padding: 40rpx;
		font-size: 24rpx;

		.on1 {
			font-size: 30rpx;
		}
	}

	.unshow {
		display: none;
	}

	.showing {
		height: 100vh;
		width: 100vw;
		background-color: #33333380;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.neirong {
		background-color: #fff;
		width: 84vw;
		padding: 5%;
		z-index: 1000;
		position: absolute;
		top: 15%;
		left: 3%;
		display: flex;
		flex-direction: column;
		border-radius: 6px;
		padding-bottom: 40px;

		.nclose {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.ntitle {
			color: #66deff;
			font-weight: bolder;
			font-size: 19px;
			margin: 20px 0;
		}

		.ncontent {
			font-size: 15px;
		}
	}

	.xiangce {
		position: absolute;
		transform: scale(1.5);
		left: 12%;
		bottom: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
		z-index: 100;
		overflow: hidden;
	}

	.goback {
		position: absolute;
		// transform: scale(1.5);
		left: 5%;
		top: 50rpx;
		// box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
		z-index: 100;
		overflow: hidden;
	}

	.skip {
		position: absolute;
		// transform: scale(1.5);
		right: 5%;
		top: 50rpx;
		// box-shadow: 2rpx 4rpx 8rpx rgba(000, 000, 000, 0.3);
		z-index: 100;
		overflow: hidden;
		height: 30px;
		width: 70px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		font-size: 14px;
		font-weight: bold;
		align-items: center;
		border-radius: 15px;
		background-color: #fff;
	}

	.unshow {
		display: none;
	}

	.show {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2000;
		height: 100vh;
		width: 100vw;
		background-color: #4b4b4b80;
	}

	.show_all {
		background-color: #000;
		width: 84vw;
		margin: 30vh auto;
		padding: 5%;
		border-radius: 6px;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pic_img {
		width: 28px;
		height: 28px;
		position: absolute;
		transform: rotate(20deg) scale(.7) translate(19px, 8px);
	}

	.liUqCn {
		transform: scale(2) translate(5px, 5px);
	}

	.toastfont {
		color: #fff;
		width: 80%;
		font-size: 18px;
	}

	.toast {
		display: flex;
		flex-direction: row;
	}

	.pic {
		width: 20%;
	}

	.know {
		background-color: #fff;
		width: 100%;
		height: 70px;
		display: flex;
		align-items: center;
		margin-top: 40px;
		font-size: 13px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.item_img {
		width: 19px;
		height: 19px;
		color: #000;
	}

	.continue {
		color: #fff;
		margin-top: 40px;
		margin-bottom: 20px;
	}

	.resend {
		font-size: 13px;
		text-decoration: underline;
		font-weight: bolder;
		margin-top: 30px;
	}
</style>